<template>
  <span :class="statusClass">{{ index + 1 }}: {{ status }}</span>
</template>

<script>
export default {
  props: {
    status: String,
    index: Number
  },
  computed: {
    statusClass() {
      return {
        'right': this.status === '回答正确',
        'error': this.status === '回答错误',
        'undo': this.status === '未完成'
      };
    }
  }
};
</script>


<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>